Revision:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat porro, laborum quasi accusamus voluptates consectetur ipsam tempora, possimus modi.
code:
<div class='card-container'>
<div class="card">
<div class="card-header">
<img
src="../images/1.jpg" alt="nice image"/>
</div>
<div class="card-body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate
itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat
porro, laborum quasi accusamus voluptates consectetur ipsam tempora,
possimus modi.
</p>
<button>Details</button>
<button>Contact me</button>
</div>
</div>
</div>
<style>
.card {display: flex; flex-direction: row; gap: 1rem; border: 1px solid #ccc; padding: 1rem;}
.card-header {max-width: 400px;}
img {width: 100%; height: 100%; object-fit: cover;}
</style>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat porro, laborum quasi accusamus voluptates consectetur ipsam tempora, possimus modi.
code:
<div class='card-container1'>
<div class="card1">
<div class="card-header1">
<img id="image1" src="../images/1.jpg" alt="nice image"/>
</div>
<div class="card-body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate
itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat
porro, laborum quasi accusamus voluptates consectetur ipsam tempora,
possimus modi.
</p>
<button>Details</button>
<button>Contact me</button>
</div>
</div>
</div>
<style>
.card-container1 {container-type: inline-size;}
.card1 {display: flex; flex-direction: row; gap: 1rem; border: 1px solid #ccc; padding: 1rem;}
.card-header1 {max-width: 400px;}
#image1 {width: 100%; height: 100%; object-fit: cover; }
@container (max-width: 500px) {
.card1 {flex-direction: column;}
}
</style>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quos repellendus iure atque accusantium. Tempora perferendis ipsa quia, ut magnam adipisci repudiandae porro ad eos. Officiis sit nam ad temporibus!
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quos repellendus iure atque accusantium. Tempora perferendis ipsa quia, ut magnam adipisci repudiandae porro ad eos. Officiis sit nam ad temporibus!
code:
<div>
<header>
<div>
<nav>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</nav>
<section>
<h1>Hero Section</h1>
</section>
</div>
</header>
<main>
<div>
<section class="section-one">
<h2>Section 1</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quos
repellendus iure atque accusantium. Tempora perferendis ipsa quia,
ut magnam adipisci repudiandae porro ad eos. Officiis sit nam ad
temporibus!
</p>
</section>
<section class="section-two">
<h3>Section 2</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio quos
repellendus iure atque accusantium. Tempora perferendis ipsa quia,
ut magnam adipisci repudiandae porro ad eos. Officiis sit nam ad
temporibus!
</p>
</section>
</div>
</main>
</div>
<style>
header { container-name: headerContainer; container-type: inline-size;}
@container headerContainer (max-width: 700px) {
/* This style will not be applied because it is outside of headerContainer element */
.section-one{ border: 2px solid black;}
/* This style will be applied because it is inside of headerContainer element */
nav {border: 2px solid black;}
}
main {container-name: mainContainer; container-type: inline-size;}
@container mainContainer (width < 800px) {
/* This style will be applied because it is inside of mainContainer element */
.section-one {background-color: #89cff0;}
/* This style will not be applied because it is outside of mainContainer element */
nav {background-color: green;}
}
</style>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat porro, laborum quasi accusamus voluptates consectetur ipsam tempora, possimus modi.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et voluptate itaque neque totam quod vitae mollitia beatae blanditiis saepe quaerat porro, laborum quasi accusamus voluptates consectetur ipsam tempora, possimus modi.
code:
<main class="frame">
<div class="card2 card-shadow">
<div class="card-header2">
<img class="image2" src="../images/2.jpg" alt="" />
</div>
<div class="card-body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
voluptate itaque neque totam quod vitae mollitia beatae blanditiis
saepe quaerat porro, laborum quasi accusamus voluptates consectetur
ipsam tempora, possimus modi.
</p>
<button class="btn">Details</button>
<button class="btn btn-outline">Contact seller</button>
</div>
</div>
<br />
<div class="card2 card-shadow">
<div class="card-header2">
<img class="image2" src="../images/3.jpg" alt=""/>
</div>
<div class="card-body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
voluptate itaque neque totam quod vitae mollitia beatae blanditiis
saepe quaerat porro, laborum quasi accusamus voluptates consectetur
ipsam tempora, possimus modi.
</p>
<button class="btn">Details</button>
<button class="btn btn-outline">Contact seller</button>
</div>
</div>
</main>
<aside class="sidebar">
<h3>Sidebar</h3>
<div class="card2 card-shadow">
<div class="card-header2">
<img class="image2" src="../images/4.jpg" alt=""/>
</div>
<div class="card-body">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et
voluptate itaque neque totam quod vitae mollitia beatae blanditiis
saepe quaerat porro, laborum quasi accusamus voluptates consectetur
ipsam tempora, possimus modi.
</p>
<button class="btn">Details</button>
<button class="btn btn-outline">Contact seller</button>
</div>
</div>
</aside>
<style>
aside {border-left: 3px solid black; padding: 0.5rem; flex: 1;}
.frame {padding: 0.5rem; flex: 1;}
.card2 {display: flex; flex-direction: row;}
.card-header2 {max-width: 500px;}
.image2 { width: 100%; height: 100%; object-fit: cover;}
.btn.btn-outline:hover, .btn.btn-outline:focus { background-color: hsl(200, 50%, 90%);}
.btn + .btn {margin-left: 0.25rem;}
.frame, .sidebar {container-type: inline-size; container-name: sidebar;}
@container sidebar (max-width: 500px) {
.card2 {flex-direction: column;}
.card-header2 {width: 100%; }
}
</style>
code:
<div class="frame1">
<div class="card-container_A">
<div class="card_A">
<div class="size-area">
<div class="size-line"></div>
<div class="size-indicator">
<div class="size-val"></div>
</div>
<div class="size-line"></div>
</div>
<div class="layout">
<div class="heart">
<h3>
<span class="line-1">Happy</span>
<span class="line-2">Container</span>
<span class="line-3">Query</span>
<span class="line-4">Day</span>
</h3>
</div>
</div>
<div class="bonus-thing"></div>
</div>
</div>
<button id="btn-1" data-trigger="cycle-width">Cycle width</button>
</div>
<style>
:root {--mouse-x: 50%; --mouse-y: 25%;}
.card-container_A {container: card_A / inline-size; overflow: hidden; resize: horizontal; width: 600px; min-width: 300px; max-width: 900px; height: 500px; filter: drop-shadow(0 15px 50px #600b); }
.card_A {--size-heart-color: mediumvioletred; --bg: lightpink; padding: 1rem; width: 100%; height: 100%; background: var(--bg);}
.heart {container: heart / inline-size;}
.heart span { display: block; text-align: center;}
.size-area { display: grid; gap: 1rem; grid-template-columns: 1fr auto 1fr; align-items: center;}
.size-line {height: 2px; background-color: var(--size-heart-color);}
.size-indicator {position: relative; margin: 0 auto;display: grid; place-items: center; width: 60px; height: 45px;}
.size-indicator:before, .size-indicator:after {position: absolute; content: ""; left: 30px; top: 0; width: 30px; height: 50px; background: var(--size-heart-color); border-radius: 30px 30px 0 0; transform: rotate(-45deg); transform-origin: 0 100%;}
.size-indicator:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
@container card_A (max-width: 399px) {
/* Color fonts */
.heart span {font-family: Mistral, sans-serif; font-palette: --myPalette; font-size: 3.6rem; line-height: 1;}
@font-palette-values --myPalette {
font-family: Mistral; base-palette: 6;
}
.card_A {display: grid; align-items: center; grid-template-rows: 1fr auto; margin-bottom: 2em; background: linear-gradient(#ffb8ef, #ebcdff);}
.size-area {margin-bottom: 1em;}
.size-indicator {transition: all 0.2s ease-in-out; scale: 2; transform-origin: 50% 100%;}
.layout {grid-row: 1/2; }
}
@container card_A (min-width: 400px) and (max-width: 499px) {
.card_A { --size-heart-color: #fff; --bg: #333; --color-1: rgb(205 255 155 / 1); --color-2: rgb(0 0 0 / 0); --size: 7.5rem; display: flex; flex-direction: column-reverse; gap: 1em; }
.card_A .size-val {/* @TODO: Put in Custom Prop instead of doing the Specificity thing */ color: #333;}
.layout {flex: 1; display: grid; place-content: center; background: radial-gradient( var(--size) var(--size) at var(--mouse-x) var(--mouse-y), var(--color-1) 0%, var(--color-2) 99%); -webkit-background-clip: text; background-clip: text; }
.heart {pointer-events: none; container-type: normal;}
h3 {font-size: 4rem;font-family: "Exo", sans-serif; text-transform: uppercase; color: transparent; user-select: none;}
}
@container card_A (min-width: 500px) and (max-width: 599px) {
/* argyle! */
.card_A {--size-heart-color: white; --bg: white; background: linear-gradient(45deg, green, blue, red); text-shadow: 0 1px 4px hsl(0 0% 0% / 20%); -webkit-mask: var(--mask-corner-cut-circles-2); mask: var(--mask-corner-cut-circles-2);}
h3{color: skyblue; }
.heart {font-size: 5cqi;}
.size-val {color: red;}
@media (prefers-reduced-motion: no-preference) {
.size-indicator {animation: var(--animation-float);}
}
}
@keyframes rotate {
to {--angle: 360deg; }
}
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: true;
}
@property --scaler {
syntax: "<number>";
initial-value: 0.1;
inherits: true;
}
@keyframes fade-in {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes drop-in {
from {translate: 0% -100%;}
to {translate: 0% calc(var(--i) * 25%);}
}
@container card_A (min-width: 600px) and (max-width: 699px) {
.card-container_A {
}
.card_A {--size-heart-color: darkmagenta; --bg: hotpink; --bg: repeating-conic-gradient( deeppink, deeppink 10deg, hotpink 10deg,
hotpink 20deg );}
.heart {container-type: normal; }
.line-1 {--i: 1;}
.line-2 {--i: 2;}
.line-3 {--i: 3;}
.line-4 {--i: 4;}
h3 {font-weight: 700; color: white; text-shadow: 2px 2px rgb(0 0 0 / 0.4); user-select: none;}
h3 span { --scaler: 0.1; animation: fade-in 0s ease-in-out, drop-in 0s ease-in-out both; animation-delay: calc(var(--i) * -0.2s); font-size: 3rem; rotate: calc(var(--i) * -10deg); scale: calc(1 + (var(--i) * var(--scaler))); opacity: 1;}
@media (prefers-reduced-motion: no-preference) {
.card_A { animation: 30s rotate linear infinite;}
h3 span {animation-duration: 1s, 1s;transition: scale 2s ease-in-out, opacity 2s ease-in-out; transition-delay: calc((var(--i) - 1) * 0.1s), 0;}
h3:hover span {--scaler: 10; opacity: 0; }
}
}
@font-palette-values --nabla {
font-family: "Nabla";
base-palette: 1;
override-colors: 0 hsl(328deg 100% 50%);
}
@container card_A (min-width: 700px) and (max-width: 799px) {
/* argyle! */
.card_A {--size-heart-color: deeppink; --bg: magenta; color: white; background: #111; -webkit-mask: var(--mask-edge-scalloped); mask: var(--mask-edge-scalloped);}
.bonus-thing {display: none;}
.heart > h3 { font-size: 11cqi; font-family: "Segoe Script"; font-palette: --nabla; line-height: 1.1; margin-top: 1.5rem; }
@media (dynamic-range: high) {
@supports (background: color(display-p3 1 0 1)) {
.card_A {--size-heart-color: color(display-p3 1 0 1);}
}
}
}
@container card_A (min-width: 800px) {
.card_A { --size-heart-color: palevioletred;--bg: #ffe4e5;}
.bonus-thing { display: block; background: url("../images/flowers.jpg"); background-size: contain; background-repeat: no-repeat; position: absolute; bottom: -60%; right: 5%; width: 40cqi; height: 70cqi; animation: pop-in 0.25s ease-in forwards;}
.heart span { text-align: left; font-size: min(11cqi, 5.5rem); padding-left: 3rem; color: #cf6387; line-height: 1.1; text-shadow: 4px 2px #ff9f9f, 8px 4px #ffe5a9, 12px 8px white;}
@keyframes pop-in {
0% {opacity: 0; transform: scale(0.8) rotate(-8deg);}
100% { opacity: 1; transform: scale(1) rotate(8deg);}
}
}
@layer base {
.frame1 * {box-sizing: border-box;}
.frame1 {font-family: system-ui; display: grid; place-items: center; height: 80vh; background: url(../images/25.jpg) center no-repeat; background-size: cover;}
.card-container_A:after { content: "Resize me"; display: block; position: absolute; bottom: 0.35rem; right: 0.35rem; background: white;
text-transform: uppercase; padding: 0.25rem; letter-spacing: 0.5px; font-size: 80%; font-weight: 600;}
h3 {font-family: "Petit Formal Script";}
.bonus-thing {position: absolute; display: none;}
.size-val {z-index: 1; color: white;}
#btn-1 {padding: 0.5rem; background: white; border: 1px solid black; text-transform: uppercase; letter-spacing: 0.5px; z-index: 1;}
}
</style>
<script>
const cardContainer = document.querySelector(".card-container_A");
let containerWidth = 600; // = default width
// Observe container and keep track of its width.
const cardObserver = new ResizeObserver((entries) => {
entries.forEach((entry) => {
containerWidth = entry.contentRect.width;
document.querySelector(".size-val").innerText = containerWidth;
});
});
cardObserver.observe(cardContainer);
const widths = [300, 400, 500, 600, 700, 900];
document
.querySelector('[data-trigger="cycle-width"]')
.addEventListener("click", () => {
// Find next listed width greater than current containerWidth
let widthIndex = widths.findIndex(function (potentialWidth) {
return potentialWidth > containerWidth;
});
// No match found? Wing back to first eligible width
widthIndex = widthIndex == -1 ? 0 : widthIndex;
// Update container width
cardContainer.style.width = `${widths[widthIndex]}px`;
// Reset mouse position
document.documentElement.style.setProperty("--mouse-x", `50%`);
document.documentElement.style.setProperty("--mouse-y", `50%`);
});
// Track mouse position over .layout
document.querySelector(".layout").addEventListener("pointermove", (evt) => {
let x = evt.offsetX;
let y = evt.offsetY;
document.documentElement.style.setProperty("--mouse-x", `${x}px`);
document.documentElement.style.setProperty("--mouse-y", `${y}px`);
});
</script>